<template>
	<view>
		<cu-custom bgColor="bg-white">
			<block slot="content">来一桶</block>
		</cu-custom>
			<view style="background-color: #FFFFFF;">
				<view class="flex align-end">
					<view class="flex-treble padding-lr-sm margin-xs radius">
						<view class="text-bold">成都天府新区</view>
						<view class="text-bold padding-top-xs">远大中央公园
						<button class="cu-btn sm radius light bg-orange margin-left" @tap="changeShop">切换</button>
						</view>
					</view>
<!-- 					<view class="flex-sub padding-lr-sm padding-top-sm margin-xs radius">
						<s-switch @switchValue="getSwitchValue" :defaultValue="1" :switchList="arr"></s-switch>
					</view> -->
				</view>
			
			<!-- 	<view class="flex align-end">
					<view class="flex-treble padding-lr-sm padding-bottom-sm margin-xs radius text-cut"> -->
					<!-- 	<view class="text-gray">距离您4.3km</view> -->
	<!-- 					<view class="padding-top-xs text-gray text-cut">天府新区华阳远大中央公园南湖路333号万象城DB06铺</view>
					</view>
					<view class="flex-sub padding-lr-sm padding-bottom-sm margin-xs radius text-center">
						<navigator url="../shop_info">
						<view class="padding-top-xs text-gray ">门店信息<text class="cuIcon-unfold"></text></view>
						</navigator>
					</view>
				</view> -->
			</view>
			
		
		
		<view class="VerticalBox" :style="[{top:CustomBar + 'px'}]">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh - 375upx)">
				<view class="cu-item" :class="index==tabCur?'text-orange cur':''" v-for="(item,index) in list" :key="index" @tap="TabSelect"
				 :data-id="index">
					水店-{{item.name}}
				</view>
			</scroll-view>
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 375upx)"
			 :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
	<!-- 			 <swiper class="screen-swiper square-dot"  :indicator-dots="true" :circular="true"
				  :autoplay="true" interval="5000" duration="500">
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
						<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
					</swiper-item>
				 </swiper> -->
				 
				<view class="padding-top padding-lr" v-for="(item,index) in list" :key="index" :id="'main-'+index">
					
					
					
					<view class="cu-bar solid-bottom bg-white">
						<view class="action">
							<text class="cuIcon-title text-orange"></text> 水店-{{item.name}}</view>
					</view>
					<view class="cu-list menu-avatar">
						<view class="cu-item" v-for="(food,index) in foodList" :key="index">
							<view class="cu-avatar lg" :style="{ 'background-image': 'url('+food.img+')' }"></view>
							<view class="content">
								<view class="">{{food.title1}}</view>
								<view class="text-gray text-sm flex">
									<text>
										{{food.title2}}
									</text> 
								</view>
								<view class="grid col-2 ">
									<view class="text-left">
										￥{{food.price}}
									</view> 
									<view class="text-right padding-right">
										<button @tap="addSub(index,2)" v-if="food.num > 0" class="cu-btn sm cuIcon lines-gray round padding-sm" style="font-size: 40upx;">
											<text class="cuIcon-move text-lg text-bold"></text>
										</button>
										<text v-if="food.num > 0" class="padding-lr-xs">{{food.num}}</text>
										<button @tap="addSub(index,1)" class="cu-btn sm cuIcon bg-orange padding-sm" style="font-size: 40upx;">
											<text class="cuIcon-add text-lg text-bold"></text>
										</button>
									</view> 
								</view>
							</view>
						</view>
						
						
						
					</view>
				</view>
			</scroll-view>
		</view>
		
		
		<view class="cu-modal bottom-modal" :class="modalName==1&&totalNum > 0?'show':''"  @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				
				<view class="padding-xs text-left bg-gray">
					<view class="shadow" @tap="clear"><text class="cuIcon cuIcon-delete padding-right-xs"></text>清空购物车</view>
				</view>
				<view style="min-height: 350upx;height: auto;">
					<view class="cu-list menu">
						
						<view class="cu-item" v-for="(food,index) in foodList" :key="index" v-if="food.num>0">
							<view class="content text-left">
								<text>{{food.title1}}</text>
							</view>
							<view class="action">
								<text class="padding-right">￥{{food.price*food.num}}</text>
								<button @tap="addSub(index,2)" class="cu-btn sm cuIcon lines-gray round padding-sm" style="font-size: 40upx;">
									<text class="cuIcon-move text-lg text-bold"></text>
								</button>
								<text class="padding-lr-xs">￥{{food.num}}</text>
								<button @tap="addSub(index,1)" class="cu-btn sm cuIcon bg-orange padding-sm" style="font-size: 40upx;">
									<text class="cuIcon-add text-lg text-bold"></text>
								</button>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white tabbar border shop foot" style="background-color: #f1f1f1;" v-if="totalNum > 0">
			
			
			<view class="action" @tap="openBag">
				<view class="cuIcon-goods">
					<view class="cu-tag badge">{{totalNum}}</view>
				</view>
				购物袋
			</view>
			<button class="action" style="width: 200px;">
				<view class="grid col-1 text-right padding-right-lg">
					<view class="text-bold text-lg margin-top-xs">￥{{totalPrice}}</view>
					<view class="text-grey  margin-top-xs">餐盒费￥0，配送费￥6</view>
				</view>
			</button>
			<view class="bg-orange submit" @tap="cat()">结算</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true,
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'https://qm-1251361737.cos.ap-shanghai.myqcloud.com/pro/lsg1.png'
				}, {
					id: 1,
					type: 'image',
					url: 'https://qm-1251361737.cos.ap-shanghai.myqcloud.com/pro/lsg2.png',
				}],
				arr: [
						{
							key: 1,
							value: '外卖'
						},
						{
							key: 2,
							value: '自取'
						}
					],
				foodList:[
					    {
							title1: '农夫山泉(大桶)',
							title2: ' 饮用天然水 4L透明装*6桶 整箱装 桶装水',
							img: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2719431387,3639266287&fm=199&app=68&f=JPEG?w=750&h=750&s=78AC3872475753C85A4CA4F50100E023',
							price: 30,
							num:0
				        },
						{
						    title1: '农夫山泉(中桶)',
						    title2: ' 饮用天然水 4L透明装*6桶 整箱装 桶装水',
						    img: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2719431387,3639266287&fm=199&app=68&f=JPEG?w=750&h=750&s=78AC3872475753C85A4CA4F50100E023',
						    price: 55,
						    num:0
						},
						{
							title1: '农夫山泉(小桶)',
							title2: '2000ml,好喝',
						    img: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2719431387,3639266287&fm=199&app=68&f=JPEG?w=750&h=750&s=78AC3872475753C85A4CA4F50100E023',
							price: 20,
							num:0
						},
						{
							title1: '怡宝(大桶)',
							title2: '2000ml,好喝',
							img: 'http://img11.360buyimg.com/n1/jfs/t1/115002/14/19115/66958/5f708e30Eb4e47f95/c2c73d905b6cd5bf.jpg',
							price: 19,
							num:0
						},
						{
							title1: '怡宝(小桶)',
							title2: '2000ml,好喝',
							img: 'http://img11.360buyimg.com/n1/jfs/t1/115002/14/19115/66958/5f708e30Eb4e47f95/c2c73d905b6cd5bf.jpg',
							price: 35,
							num:0
						}
				],
				totalPrice:0,
				totalNum:0,
				modalName: 0
			};
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			let list = [{}];
			for (let i = 0; i < 26; i++) {
				list[i] = {};
				list[i].name = String.fromCharCode(65 + i);
				list[i].id = i;
			}
			this.list = list;
			this.listCur = list[0];
		},
		onReady() {
			uni.hideLoading()
		},
		methods: {
			getSwitchValue (e) {
			            console.log(e.key)
				uni.showToast({
					icon: 'none',
					title:'已切换到' + (e.key == 1?"外卖餐品":"自取餐品")
				})
			},
			cat(){
				var arr_sel = [];
				for (var i = 0; i < this.foodList.length; i++) {
					if(this.foodList[i]["num"] > 0){
						arr_sel.push(this.foodList[i]);
					}
				}
				console.log(JSON.stringify(arr_sel))
				uni.navigateTo({
					url: '../order/order_confirm?foods='+ encodeURIComponent(JSON.stringify(arr_sel))
				})
			},
			hideModal(){
				this.modalName = 0;
			},
			addSub:function(index, type){
				console.log(index)
				var food = this.foodList[index];
				//加
				if(type == 1){
					food["num"] = food["num"] + 1;
					this.totalNum ++;
					this.totalPrice += food["price"];
				}else{
					food["num"] = food["num"] - 1;
					this.totalNum --;
					this.totalPrice -= food["price"];
				}
				if(this.totalNum == 0){
					this.modalName = 0;
				}
				
			},
			clear(){
				this.totalNum = 0;
				this.totalPrice = 0;
				for (var i = 0; i < this.foodList.length; i++) {
					this.foodList[i]["num"] = 0;
				}
				this.modalName = 0;
			},
			openBag(){
				this.modalName = this.modalName == 1?0:1;
			},
			changeShop(){
				uni.navigateTo({
					url:"../index/index"
				})
			},
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			},
			VerticalMain(e) {
				
				// #ifdef MP-ALIPAY
				   return false  //支付宝小程序暂时不支持双向联动 
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
						view.fields({
							size: true
						}, data => {
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.list[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (this.list[i].id - 1) * 50
						this.tabCur = this.list[i].id
						console.log(scrollTop)
						return false
					}
				}
			}
		},
	}
</script>

<style>
	/*#ifdef H5 */
	.cu-bar.foot{bottom: 50px;}
	.bottom-modal{bottom: 100px;}
	/*#endif */
	/*#ifndef H5 */
	.bottom-modal{bottom: 50px;}
	/*#endif */
	
	.cu-modal {
		transition: auto;
	}
	.fixed {
		position: fixed;
		z-index: 99;
	}

	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #f1f1f1;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #fff;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: #f37b1d;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		background-color: #fff;
		flex: 1;
	}
	
	.cu-list.menu-avatar>.cu-item .content {
		width: calc(100%  - 120upx);
	}
	.cu-list.menu-avatar>.cu-item{
		height: 100px;
	}
</style>
